Table of Contents

  1. Introduction
  2. Configuration
  3. Usage

  1. Introduction – Top ↑

    The "Polyglot" Language Switcher jQuery plugin allows you easily switch between the languages supported by your website. It was conceived as a drop-down menu with flag icons.

  2. Configuration – Top ↑

    • Configuration Parameters

      • animSpeed – The speed, in milliseconds, that is used to display and hide the pop-up menu. The default value is 200 ms.
      • effect – You can choose between two possible animation effects: ‘fade’ and ‘slide’. The default value is ‘fade’.
      • paramName – The name of the parameter used in the HTTP GET query to send the value of the chosen language. The default value is ‘lang’ (e.g., http://www.ixtendo.com?lang=en)
      • websiteType – Specify the type of website where this jQuery plugin will be used. This parameter can be dynamic if the website pages are generated by a programming language (PHP, Java, C#, Perl, etc.) or static if the pages are pure HTML files.
      • pagePrefix – This parameter will be taken into account only if the websiteType parameter has a value of 'static'; otherwise it will be ignored. This parameter will be used to compose the URL.
      • indexPage– This parameter will be taken into account only if the websiteType parameter has a value of 'static'; otherwise it will be ignored. The value must represent the name of the index page. The default value is ‘index.html’.
      • testMode– This parameter must be used on true only when you want to make a demo of this plugin without having the internationalization support implemented on the server side. The default value is ‘false’.
      • openMode– This parameter can have one of the following two values: click or hover (default is click). It specifies on which mouse event the polyglot popup should be opened.
      • hoverTimeout– This parameter is taken into account only if the openMode parameter has the value of ‘hover’. It specifies the time in milliseconds after which the popup will be closed when the user moves the mouse away from the Polyglot popup area. The default value is 1500 (milliseconds).

    • Callback Functions

      • onChange (since 2.0) – This parameter allows you to define a callback function which will be called after the user changes the language.
      • afterLoad (since 2.0) – This parameter allows you to define a callback function which will be called after the user changes the language.
      • beforeOpen (since 2.0) – This parameter allows you to define a callback function which will be called before the popup is opened.
      • afterOpen (since 2.0) – This parameter allows you to define a callback function which will be called after the popup is opened.
      • beforeClose (since 2.0) – This parameter allows you to define a callback function which will be called before the popup is closed.
      • afterClose (since 2.0) – This parameter allows you to define a callback function which will be called after the popup is closed.

      All the callback functions have a single parameter which is a simple object with the following properties:

      • name – the name of the event
      • element – the HTML element built by the plugin based on the default HTML structure
      • instance – the polyglotLanguageSwitcher instance (can be used to invoke the public methods)

    • Public Methods

      • open() (since 2.0) – This method can be used to open the popup if it is closed.
      • close() (since 2.0) – This method can be used to close the popup if it is open.

    The above parameters can be specified to the library as follows:

    …
	$(this).polyglotLanguageSwitcher({paramName:'language'}); //chaging the language parameter name
	
	$(this).polyglotLanguageSwitcher({effect:'slide'}); //chaging the open/close popup effect
	
	$(this).polyglotLanguageSwitcher({ //example of multiple configuration paremeters
		paramName: 'language', 
		effect: 'slide', 
		animSpeed: 150
	});

    //example of onChange callback function
    $(this).polyglotLanguageSwitcher({
        onChange: function(evt){
            alert("The selected language is: "+evt.selectedItem);
            return true;
        }
    });

    /* Example of popup closure on a mobile device (e.g., IPad, IPhone, etc.) when the user presses outside it.
   To implement this, you need to integrate the jQuery touchSwipe library in your website. This library can be found at
    the following address: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin. */
    $(this).polyglotLanguageSwitcher({
         afterLoad: function(evt){
            $(document).swipe( {
                click:function(e, target){
                    evt.instance.close();
                }
            });
        }
    });
…

  3. Usage – Top ↑

    To use the "Polyglot" Language Switcher in you website, add the following lines of code in the <head> tag of your web page:

    <head>
	…
	<link href="css/polyglot-language-switcher.css" type="text/css" rel="stylesheet">
	<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
	<script src="js/jquery.polyglot.language.switcher-1.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(this).polyglotLanguageSwitcher();
	});
	</script>
</head>

    In the <body> section of your page, add the following lines of code:

    <body>
	…
	<div id="polyglotLanguageSwitcher">
		<form action="#">
			<select id="polyglot-language-options">
				<option id="en" value="en">English</option>
				<option id="fr" value="fr" selected>French</option>
				<option id="de" value="de">German</option>
				<option id="it" value="it">Italian</option>
				<option id="es" value="es">Spanish</option>
			</select>
		</form>
	</div>
	…
</body>

    When the ‘websiteType’ configuration parameter has the value of ‘dynamic’, after the user changes the language, the newly generated pages must select the option which corresponds to the selected language. For example, if the Italian language was selected, then all the pages generated by the server must select the option with an id of ‘it’.

    In the case of static websites (where the pages are pure HTML and aren't generated by a programming language), the selected attribute of the option element will not be taken into account. In this case, the selected value will be stored in the local cache (using HTML5 local storage). It is possible that this case will not work properly on some older browsers which don't support HTML5 local storage.

Back to the table of contents ↑